<template>
  <component
    :is="component.name"
    v-bind="resolvedProps"
    v-on="resolvedEvents"
  >
    <!-- 处理默认插槽 -->
    <template v-if="hasDefaultSlot" #default>
      <component-slot-content
        :slot-config="slots.default"
        :available-components="availableComponents"
      />
    </template>
    
    <!-- 处理命名插槽 -->
    <template
      v-for="(slotConfig, slotName) in namedSlots"
      :key="slotName"
      #[slotName]="slotProps"
    >
      <component-slot-content
        :slot-config="slotConfig"
        :available-components="availableComponents"
        :slot-props="slotProps"
      />
    </template>
    
    <!-- 处理子组件 -->
    <template v-if="component.childComponents && component.childComponents.length > 0">
      <template v-for="childComp in component.childComponents" :key="childComp.name">
        <component-renderer
          v-if="children[childComp.name]"
          :component="{ 
            name: childComp.name,
            props: childComp.props || {},
            events: childComp.events || {},
            slots: childComp.slots || {}
          }"
          :props="children[childComp.name].props || {}"
          :events="children[childComp.name].events || {}"
          :slots="children[childComp.name].slots || {}"
          :children="children[childComp.name].children || {}"
        />
      </template>
    </template>
  </component>
</template>

<script>
import { defineComponent, computed, markRaw } from 'vue'
import * as ElementPlusIcons from '@element-plus/icons-vue'
import ComponentSlotContent from './ComponentSlotContent.vue'
import { componentConfigs } from './component-configs'

export default defineComponent({
  name: 'ComponentRenderer',
  components: {
    ComponentSlotContent
  },
  props: {
    component: {
      type: Object,
      required: true
    },
    props: {
      type: Object,
      default: () => ({})
    },
    events: {
      type: Object,
      default: () => ({})
    },
    slots: {
      type: Object,
      default: () => ({})
    },
    children: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    // 可用组件列表
    const availableComponents = markRaw(componentConfigs)
    
    // 处理图标属性
    const resolvedProps = computed(() => {
      const result = { ...props.props }
      
      // 处理图标属性
      if (props.component.props) {
        Object.entries(props.component.props).forEach(([key, propConfig]) => {
          if (propConfig.type === 'icon-select' && result[key]) {
            result[key] = markRaw(ElementPlusIcons[result[key]])
          }
        })
      }
      
      return result
    })
    
    // 处理事件
    const resolvedEvents = computed(() => {
      const result = {}
      
      if (props.events) {
        Object.entries(props.events).forEach(([eventName, enabled]) => {
          if (enabled) {
            result[eventName] = (...args) => {
              console.log(`Event ${eventName} triggered with args:`, args)
            }
          }
        })
      }
      
      return result
    })
    
    // 判断是否有默认插槽
    const hasDefaultSlot = computed(() => {
      return props.slots && props.slots.default
    })
    
    // 获取命名插槽
    const namedSlots = computed(() => {
      if (!props.slots) return {}
      
      const result = { ...props.slots }
      if (result.default) {
        delete result.default
      }
      
      return result
    })
    
    return {
      resolvedProps,
      resolvedEvents,
      hasDefaultSlot,
      namedSlots,
      availableComponents
    }
  }
})
</script>